<template>
    <div class="bigbox" >
        <img :src="msg.img" alt="" class="img">
        <p class="text">{{msg.txt}}</p>
        <div class="down">
            <p class="money"> <strong>￥</strong> <strong class="now">{{msg.ml}}</strong> <span class="original">| 原价￥13</span>
            </p>
            <p class="ku">库存: <span>{{msg.kucun}}</span> 件</p>
            <div class="car">
                <i class="el-icon-shopping-cart-2 cart"></i>
            </div>
        </div>


    </div>
</template>

<script>
export default {
    props: {
       msg:{
        type:Object,
       
        
       }
        
    },
    data(){
        return{
        }
    }
   
}
</script>

<style lang="scss">
.bigbox {
    background-color: rgb(255, 255, 255);
    width: 46vw;
    border-radius:  2.6667vw;
    // border-top-left-radius: 2.6667vw;
    // border-top-right-radius: 2.6667vw;
    overflow: hidden;
    margin: 2.6667vw 0;

    //图片
    .img {
        width: 46vw;
        height: 35vw;
        margin-bottom: 2.3667vw;

    }

    //菊乐酸奶文字
    .text {
        font-size: 3.899vw;
        font-weight: bold;
        margin: 0;
        padding-left: 1.3333vw;
    }

    //下面整个一坨
    .down {
        padding: 1.3333vw;
        position: relative;
        z-index: 1;
        //酸奶文字下方价格一栏
        .money {
            font-size: 3.7333vw;
            color: red;
            text-align: left;
            margin: 0;

            .now {
                font-size: 4.1vw;
            }

            .original {
                color: #b3b3b3;
            }
        }

        //库存
        .ku {
            margin: 2.6667vw 0;
            display: inline-block;
            border: 1px #6fa0e7 solid;
            font-size: 1.8667vw;
            padding: 0.9333vw;
            color: #6fa0e7;
            border-radius: 1.6667vw;
            margin: 1.3333vw 0;
            background-color: #e8f1ff;

        }

        //购物车
        .car {
            display: inline-block;
            width: 8vw;
            height: 8vw;
            background-color: #f98021;
            font-size: 5.3333vw;
            color: white;
            position: absolute;
            right: 2.6667vw;
            bottom: 2.6667vw;
            border-radius: 50%;

            .cart {
                position: absolute;
                left: -20%;
                top: 50%;
                transform: translate(50%, -50%);

            }
        }
    }

}</style>